<template>
  <div class="lie-biao">
    <Breadcrumb :breadStr="breadStr"></Breadcrumb>
    <el-card
      shadow="hover"
      :body-style="{ padding: '20px' }"
    >
      <div class="lie-biao-content">
        <el-tag
          type="danger"
          v-if="skList&&skList.length===0"
        >暂未添加任何技能项</el-tag>
        <el-tag
          v-for="skill in dynamicTags"
          :key="skill"
          closable
          @close="handleClose(skill)"
        >{{skill}}</el-tag>
        <el-input
          class="input-new-tag"
          v-if="skillInputVisible"
          v-model="skillInputValue"
          ref="refskill"
          size="small"
          @keyup.enter.native="handleInputConfirm"
          @blur="handleInputConfirm"
        >
        </el-input>
        <el-button
          v-else
          size="small"
          class="button-new-tag"
          @click="showInput"
        >+ 新增技能项</el-button>
      </div>
      <p>这个页面看起来太空了，给技能列表分个类可能更好</p>
      <p>想岗位，和岗位分类那样</p>
      <p>或者把熟练度分值修改的也移到这页来</p>
    </el-card>
  </div>
</template>

<script>
import Breadcrumb from '../common/Breadcrumb'
import { homeMixin } from '../../utils/mixin'
export default {
  mixins: [homeMixin],
  components: {
    Breadcrumb
  },
  data () {
    return {
      // skill list 技能列表
      skList: [],
      dynamicTags: [],
      skillInputVisible: false,
      skillInputValue: ''
    }
  },
  created () {
    this.getBread()
    this.getSkList()
  },
  methods: {
    // 获取技能列表
    async getSkList () {
      const { data } = await this.$http.get('/skill/getlist')
      console.log(data)
      if (data.error_code === 0) {
        this.skList = data.data
      }
      this.skList.map(item => {
        this.dynamicTags.push(item.name)
      })
    },
    async handleInputConfirm () {
      const skillInputValue = this.skillInputValue
      if (skillInputValue) {
        const { data } = await this.$http.post('/skill/add', { name: skillInputValue })
        console.log(data)
        if (data.error_code === 0) {
          this.dynamicTags.push(skillInputValue)
        } else {
          this.$message.error('该技能已存在，添加失败！')
        }
      }
      this.skillInputValue = ''
      this.skillInputVisible = false
    },
    async handleClose (tag) {
      const { data } = await this.$http.post('/skill/del', { name: tag })
      if (data.error_code === 1) {
        this.$message.error(data.msg)
      } else {
        this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1)
      }
    },
    showInput () {
      this.skillInputVisible = true
      this.$nextTick(_ => {
        this.$refs.refskill.$refs.input.focus()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/assets/styles/mixin";
.lie-biao {
  .el-card {
    .lie-biao-content {
      display: flex;
      flex-flow: row wrap;
      @include tag(20px);
    }
  }
}
</style>
